<template>
    <div class="multi-input" :class="{ 'multi-input-disabled': disabled }" ref="btn">
        <el-tag class="mark-checkbox" disable-transitions :disabled="disabled" v-for="(item, index) in value" :key="item"
            size="mini" closable @close="handleClose(index)" type="info">
            <!-- <div class="mark-text">{{ item }}</div> -->
            {{ item }}
        </el-tag>
        <el-input class="multi-el-input" v-model="modelValue" :placeholder="placeholder" :disabled="disabled"
            @keyup.enter.native="handlePaste" @blur="handlePaste" @paste.native="handlePaste" />
        <!-- <i v-if="value.length > 0 && !disabled" class="el-input__icon el-icon-circle-close" @click="handleCircleClose"></i> -->
        <!-- <md-icon><circle-close /></md-icon> -->
    </div>
</template>
<script setup>
import { ref, computed, onMounted, nextTick } from 'vue';
import { MdInput, MdTag, MdIcon } from 'mdesign3';
import { CircleClose } from '@mdesign3/icons-vue';
const emit = defineEmits(['update:value']);

// 定义Props的值
const props = defineProps({
    value: {
        type: Array,
        default: () => []
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    disabled: {
        type: Boolean,
        default: false
    },
    type: {
        type: String,
        default: 'old'
    },
    params: {
        type: Object,
        default: () => {}
    },
    fnd: { // 是否为快码
        type: Boolean,
        default: false
    }
})



const modelValue = ref('');
const list = ref([]);
const lemsUser = ref({});
const labelKey = ref('');
const mainKey = ref('');
const listType = ref('string');
const poperVisible = ref(false);
const width = ref('100%');
const currentTop = ref(null);
const isFocus = ref(false);

const className = computed(() => `popover-${new Date().getTime()}-${parseInt(Math.random() * 1000000)}`);

const idNames = computed(() => {
    if (!props.fnd) return {};
    return list.value.reduce((prev, next) => {
        prev[next.paramValue] = next.paramCode;
        return prev;
    }, {});
});

const handlePaste = (event) => {
    setTimeout(() => {
        let arr = modelValue.value.split(' ').filter(item => item.length > 0);
        const result = [...new Set([...props.value, ...arr])];
        emit('update:value', result);
        modelValue.value = '';
    });
};

const handleClose = (index) => {
    const result = [...props.value];
    result.splice(index, 1);
    emit('update:value', result);
};

const handleCircleClose = () => {
    emit('update:value', []);
};

onMounted(() => {
    if (!props.value) {
        emit('update:value', []);
    }
});


defineExpose({
    modelValue,
    list,
    lemsUser,
    labelKey,
    mainKey,
    listType,
    poperVisible,
    width,
    currentTop,
    isFocus,
    className,
    idNames,
    handlePaste,
    handleClose,
    handleCircleClose,
});
</script>
  
<style lang="less" scoped>
.multi-el-input {
    min-width: 80px;
    flex: 1;
    /deep/ .md-input__inner {
        border: none;
        height: 26px
    };
    // /deep/ .el-input {
        
    // }
}
.mark-text {
    max-width: calc(100% - 10px);
    overflow: hidden;
    text-overflow:ellipsis;
}
.multi-input {
    min-height: 26px;
    line-height: 24px;
    border: 1px solid #cecece;
    border-radius: 4px;
    position: relative;
    padding: 0px 20px 0px 0px;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 20px);
    box-sizing: border-box;
    .mark-checkbox {
        max-width: 100%;
        overflow: hidden;
        display: flex;
    }
    &.multi-input-disabled {
        background-color: #F6F8Fa;
        border-color: #E4E7ED;
        .mark-checkbox {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
        }
    }
    // .el-icon-arrow-up {
    //     color: #C3C7C7;
    //     position: absolute;
    //     transform: rotate(0deg) translateY(-50%);
    //     right: 5px;
    //     top: 50%;
    // }
    // .el-icon-arrow-down {
    //     position: absolute;
    // }
    // .popover-select {
    //     margin: 0px;
    //     padding: 0px;
    //     position: absolute;
    //     left: 0;
    //     right: 0;
    //     bottom: 0;
    //     top: -1px;
    //     /deep/ .el-input__inner {
    //         border: none !important;
    //         background-color: transparent;
    //         margin: 0px;
    //     }
    // }
    .mark-checkbox {
        margin-left: 8px;
        margin-top: 3px;
    }
    // .el-icon-circle-close{
    //     color: #C3C7C7;
    //     position: absolute;
    //     right: 10px;
    //     transform: rotate(0deg) translateY(-50%);
    //     top: 50%;
    // }
}
</style>
  